import React, { Component } from 'react';
import {
    StyleSheet, Text, TextInput, Image, StatusBar, View, TouchableOpacity
} from 'react-native';

import styles from '../../assets/css/style.js';
import LoginUtils from '../../src/util/LoginUtils';
import { StackNavigator } from 'react-navigation';

/**
 * 登录组件
 */
export default class LoginView extends Component {
    static navigationOptions = {
        title: ''
    };
    
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>

                <StatusBar
                    barStyle="dark-content"
                    backgroundColor='#fff'
                    translucent={true}
                    hidden={false}
                    animated={true}
                />
                
                <View>
                    <Image
                        style={styles.logo}
                        source={require('../../assets/img/logo.png')}
                    />
                </View>
                <View style={styles.wrap}>
                    <View style={styles.list}>
                        <View style={styles.icon}>
                            <Image
                                style={[styles.flex,styles.img]}
                                source={require("../../assets/img/icon_use.png")}
                                resizeMode="contain"
                            />
                        </View>
                        <TextInput
                            ref="userName"
                            style={[styles.Text]}
                            placeholder="user"
                            underlineColorAndroid="transparent"
                            selectTextOnFocus={true}
                            onChangeText={(text) => this.setState({userName: text})}
                        />
                    </View>
                    <View style={styles.list}>
                        <View style={styles.icon}>
                            <Image
                                style={[styles.flex,styles.img]}
                                source={require("../../assets/img/icon_pass.png")}
                                resizeMode="contain"
                            />
                        </View>
                        <TextInput
                            ref="password"
                            style={[styles.Text]}
                            placeholder="password"
                            secureTextEntry={true}
                            underlineColorAndroid="transparent"
                            selectTextOnFocus={true}
                            onChangeText={(text) => this.setState({password: text})}
                        />
                    </View>
                    <TouchableOpacity onPress={LoginUtils.sign.bind(this, this.state.userName, this.state.password, navigate, this.refs.userName, this.refs.password)}>
                        <View style={[styles.list,styles.center,styles.blue]}>
                            <Text
                                style={styles.sign}
                            >装维账号登录</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={LoginUtils.localGatewaySign.bind(this, this.state.userName, this.state.password, navigate, this.refs.userName, this.refs.password)}>
                        <View style={[styles.list,styles.center,styles.bgBlue]}>
                            <Text
                                style={[styles.sign,styles.blueColor]}
                            >本地网关登录</Text>
                        </View>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }
}